<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>ATM货道信息</h2>
        </div>
      </div>
      <Card style="margin-bottom: 10px;">
        <div class="normal-list-page-hd clearfix">


              <Col span="5" class="mr-10">
              <queryData @ProvinceData="childByValue"></queryData>
              </Col>
            
              机器编号：
                <Input class="mr-10" v-model="queryData.machineCode"  style="width:200px;" />
                <Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click="inQuire">查询</Button>
           
 
        </div>
      </Card>

      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <div class="normal-list-page-bd">
            <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData"></Table>
          </div>
          <div>
            <Page :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page" show-total
              show-elevator @on-change="changePage"></Page>
          </div>
        </div>

        <!--新建&修改-->
        <Modal v-model="modal.system.isShow" :loading="modal.system.loading" :mask-closable="false" :title="modal.system.title"
          @on-ok="postData">
          <Form ref="systemFrom" :model="modal.system.formData" :rules="modal.system.rules" :label-width="120">
            <FormItem label="旧状态" v-model="modal.system.formData.huodaoStatus">
              <Select v-model="modal.system.formData.oldtype" size="small" style="width:100px" disabled="disabled">
                <Option v-for="item in queryForm.type" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="新状态" v-model="modal.system.formData.huodaoStatus">
              <Select v-model="modal.system.formData.huodaoStatus" size="small" style="width:100px">
                <Option v-for="item in queryForm.type" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>

          </Form>
        </Modal>
      </div>
    </div>
  </div>
</template>
<script>
  import CkFafangHuodaoApi from "@/api/base_sys/ATMaisle.js";
  import moment from "moment";
  import {Message} from "iview";
  import queryData from "@/view/test/cityTestZj.vue"

  export default {
    name: "system",
    components: {
      queryData
    },
    data() {
      return {
        //城市级联专用表单
        queryForm: {
          cityCascade: {
            data: [{
              id: '',
              name: '请选择'
            }],
            provid: [],
            cityid: [],
            distid: [],
            strt: [],
            commid: [],
            comminid: [],

          },
          totalRecord: [],
          type: [{
              value: '1',
              label: '连续失败',

            },
            {
              value: '0',
              label: '正常'
            }
          ]
        },
        // 弹出层数据
        modal: {
          system: {
            isShow: false,
            loading: true,
            type: "create", // create 新建，update 修改
            title: "新建",
            rules: {
              machineCode: [{
                required: true,
                message: "请填写机器编号",
                trigger: "blur"
              }],
              machineName: [{
                required: true,
                message: "请填写机器名称",
                trigger: "blur"
              }],
              paraKey: [{
                required: true,
                message: "请填写参数编号",
                trigger: "blur"
              }],
              paraValue: [{
                required: true,
                message: "请填写参数值",
                trigger: "blur"
              }]
            },
            formData: {
              // id: undefined,
              // name: "",
              // url: "",
              // state: ""
            }
          }
        },
        // 列表
        list: {
          loading: false,
          selections: [],
          // 列表展示数据
          tableData: [],
          // 表格表头
          columns: [{
              title: "机器编号",
              key: "machineCode",
              minWidth: 130,
              align: "center",
            },
            {
              title: "机器名称",
              key: "machineName",
              minWidth: 130,
              align: "center",
            },
            {
              title: "货道编号",
              key: "huodaoIndex",
              align: "center",
              minWidth: 130,
            }, {
              title: "货道状态",
              key: "huodaoStatus",
              minWidth: 100,
              align: "center",
              render: (h, params) => {
                if (params.row.huodaoStatus == '1') {
                  return h('div', {
                    style: {
                      color: '#2db7f5',
                      textAlign: 'center'
                    }
                  }, '连续失败');
                } else {
                  return h('div', {
                    style: {
                      color: '#187',
                      textAlign: 'center'
                    }
                  }, '正常');
                }
              }

            }, {
              title: "默认商品编号集",
              key: "goodsId",
              minWidth: 150,
              align: "center",
            }, {
              title: "格子数目",
              key: "geziNum",
              align: "center",
              minWidth: 100,

            }, {
              title: "单个格子长度",
              key: "geziLong",
              minWidth: 130,
              align: "center",
            }, {
              title: "单个格子宽度",
              key: "geziWide",
              minWidth: 130,
              align: "center",
            }, {
              title: "单个格子高度",
              key: "geziHigh",
              minWidth: 130,
              align: "center",
            }, {
              title: "创建人",
              key: "insertName",
              minWidth: 100,
              align: "center",
            },
            {
              title: "创建时间",
              key: "insertTime",
              minWidth: 130,
              align: "center",
            },
            // 自动生成结束
            {
              title: "操作",
              align: "center",
              minWidth: 400,
              render: (h, params) => {
                return h("div", [
                  h(
                    'Tooltip',
                    {
                      props: {
                        placement: 'left',
                        content: '"修改(CK717操作)"'
                      },
                      style: {
                        cursor: 'pointer'
                      }
                    },
                    [
                      h(
                        'Button',
                        {
                          props: {
                            type: 'primary',
                            size: 'small'
                          },
                          style: {
                            marginRight: '5px',
                            padding: '1px 2px'
                          },
                          on: {
                            click: () => {
                              this.showUpdateModal(params.row)
                            }
                          }
                        },
                        [
                          h('Icon', {
                            props: {
                              type: ' iconfont icon-bianjisekuai',
                              size: 18
                            }
                          })
                        ]
                      )
                    ]
                  ),
                  h(
                    "Button", {
                      props: {
                        type: "success",
                        size: "small",

                      },
                      style: {
                        marginRight: "5px"
                      },
                      on: {
                        click: () => {
                          this.empty(params.row);
                        }
                      }
                    },
                    "清空货道信息(CK717操作)"
                  ),
                  
                  h(
                    'Tooltip',
                    {
                      props: {
                        placement: 'right',
                        content: '删除'
                      },
                      style: {
                        cursor: 'pointer'
                      }
                    },
                    [
                      h(
                        'Button',
                        {
                          props: {
                            type: 'error',
                            size: 'small'
                          },
                          style: {
                            marginRight: '5px',
                            padding: '1px 2px'
                          },
                          on: {
                            click: () => {
                              this.delData(params.row)
                            }
                          }
                        },
                        [
                          h('Icon', {
                            props: {
                              type: ' iconfont icon-shanchusekuai',
                              size: 18
                            }
                          })
                        ]
                      )
                    ]
                  )
                ]);
              }
            }
          ]
        },
        // 页面查询数据
        queryData: {
          limit: 10,
          page: 1,
          totalRecord: 0,
          name: 15,

        }
      };
    },
    methods: {
      click() {
        let getCities = this.value;
      },
      // 获取列表
      getTableData() {

        const that = this;
        that.queryData.totalRecord = undefined;
        CkFafangHuodaoApi.getPageList(that.queryData)
          .then(res => {

            that.list.tableData = res.data.list;
            that.queryData.totalRecord = res.data.totalRecord;
            that.queryData.limit = res.data.pageSize;
          })
          .catch(error => {
            Message.error(error);
          });
      },

      // 点击保存——新建&修改
      postData() {
        const that = this;
        CkFafangHuodaoApi.update(
            that.modal.system.formData
          )
          .then(res => {
            that.modal.system.isShow = false;
            that.modal.system.loading = false;
            if (!res.code) {
              that.getTableData();
              that.$Notice.success({
                title: "保存成功!"
              });
            } else {
              that.$Notice.error({
                title: res.message
              });
            }
          })
          .catch(error => {
            Message.error(error);
          });

      },

      // 删除
      delData(ids) {
        this.$Modal.confirm({
          title: "确认删除",
          content: "<p>您确认删除编号为 <strong>" +
            ids.machineCode + "[" + ids.huodaoIndex + "]" +
            "</strong> 货道记录吗?</p><p>删除后将无法撤销，请谨慎操作！</p>",
          loading: true,
          onOk: () => {
            console.log(ids)
            CkFafangHuodaoApi.del(ids).then(res => {
              console.log(res)
              this.$Modal.remove();
              if (!res.code) {
                this.$Notice.success({
                  title: "删除成功"
                });
                this.queryData.page = 1;
                this.getTableData();
              } else {
                this.$Notice.error({
                  title: res.message
                });
              }
            });
          }
        });
      },
      //清空货道
      empty(data) {
        this.$Modal.confirm({
          title: "确认清空",
          content: "<p>清空后不可恢复，请确认是否清空 <strong>" +
            data.huodaoIndex +
            "</strong> 货道?</p>",
          loading: true,
          onOk: () => {
            CkFafangHuodaoApi.emp(data).then(res => {
              console.log(res)
              this.$Modal.remove();
              if (!res.code) {
                this.$Notice.success({
                  title: "清空成功"
                });
                this.queryData.page = 1;
                this.getTableData();
              } else {
                this.$Notice.error({
                  title: res.message
                });
              }
            });
          }
        });
      },
      childByValue(newObject) {
        this.queryData.provid = newObject.provid;
        this.queryData.commid = newObject.commid;
        this.queryData.cityid = newObject.cityid;
        this.queryData.comminid = newObject.comminid;
        this.queryData.distid = newObject.distid;
        this.queryData.strt = newObject.strt;
      },
      //查询
      inQuire() {
		  this.queryData.page=1;
        this.getTableData();
      },
      //每页显示记录数变更
      onPageSizeChange(pageSize) {
        this.queryData.limit = pageSize;
        this.getTableData();
      },

      // 换页
      changePage(page) {
        this.queryData.page = page;
        this.getTableData();
      },

      // 显示新建弹窗
      showCreateModal() {
        this.modal.system.type = "create";
        this.modal.system.title = "新建";
        this.modal.system.formData = {};
        this.modal.system.isShow = true;
      },

      // 显示修改弹窗
      showUpdateModal(id) {
        this.modal.system.type = "update";
        this.modal.system.title = "修改";
        const that = this;
        CkFafangHuodaoApi.getDetail(id).then(res => {
            that.modal.system.formData = res.data;
            that.modal.system.formData.oldtype = that.modal.system.formData.huodaoStatus;
            that.modal.system.isShow = true;
          })
          .catch(error => {
            Message.error(error);
          });
      },
    },

    created() {
      this.getTableData();
    }
  };
</script>
